<template>
  <div class="contentBox">
    <div class="content">
      <div ref="topContent">
        <div class="topBox" ref="topBox">
          <div class="topLeft">角色管理</div>
          <div class="topRight">
            <t-button class="hoverBlue" theme="primary" @click="handleNew()" v-permission="['sys:role:save']">
              <template #icon>
                <svg-icon
                    :name="'icon-add'"
                    class-name="add-svg-icon"
                ></svg-icon>
              </template>
              新增
            </t-button>
          </div>
        </div>
        <div class="line"></div>
        <div class="formBox">
          <t-form
              ref="form"
              :data="formData"
              :layout="'inline'"
              scroll-to-first-error="smooth"
              @submit="onSubmit"
          >
            <t-form-item label="角色名称" name="roleName" :label-width="58">
              <t-input v-model="formData.roleName" placeholder="请输入角色名称"></t-input>
            </t-form-item>

<!--            <t-form-item label="机构编码" name="agencyId" :label-width="58">-->
<!--              <t-cascader-->
<!--                  :options="casOptions"-->
<!--                  v-model="formData.agencyId"-->
<!--                  :keys="{-->
<!--                value: 'agencyId',-->
<!--                label: 'agencyName',-->
<!--                children: 'children'-->
<!--              }"  />-->
<!--            </t-form-item>-->

            <t-form-item class="formHandleBox">
              <t-space size="small" style="gap: 10px;">
                <t-button class="queryBtn hoverBlue" @click="handleQuery(1)" v-permission="['sys:role:queryPage']">查询</t-button>
                <t-button class="resetBtn hoverLightBlue" @click="handleReset">重置</t-button>
              </t-space>
            </t-form-item>
          </t-form>
        </div>
        <div class="tableBox">
          <div style="position: relative">
            <t-table
                :loading="isLoading"
                :height="tableHeight"
                ref="tableRef"
                row-key="id"
                :data="tableState.tableData"
                :columns="tableState.columns"
                :selected-row-keys="selectedRowKeys"
                @select-change="handleSelectChange"
            >
              <template #handle="{ row }">
                <t-button theme="primary" class="rowEdit" @click="handleEdit(row)" v-permission="['sys:role:update']">
                  <template #icon>
                    <svg-icon
                        :name="'icon-rowEdit'"
                        class-name="row-svg-icon"
                    ></svg-icon>
                  </template>
                  修改
                </t-button>

                <t-button theme="primary" class="rowDel" @click="handleDel(row)" v-permission="['sys:role:delete']">
                  <template #icon>
                    <svg-icon
                        :name="'icon-rowDel'"
                        class-name="row-svg-icon"
                    ></svg-icon>
                  </template>
                  删除
                </t-button>
              </template>
              <template #statusSwitch="{ row }">
                <t-switch size="medium" />
              </template>
            </t-table>
            <div class="emptyBox" v-if="tableState.tableData.length === 0">
              <svg-icon
                  :name="'icon-emptyTable'"
                  class-name="emptyTable-svg-icon"
              ></svg-icon>
              <span>暂无数据</span>
            </div>
          </div>
        </div>
        <div class="footerBox">
          <t-pagination
              v-model="current"
              v-model:pageSize="pageSize"
              :pageSizeOptions="[10, 20, 30, 50]"
              :total="totalNum"
              size="small"
              show-jumper
              @page-size-change="onPageSizeChange"
              @current-change="onCurrentChange"
          />
        </div>
      </div>
    </div>
<!--    新增弹窗-->
    <new-role
        :dialogVisible="dialogVisible"
        :dialogTitle="dialogTitle"
        @closeDialog="closeDialog"
        @refreshTable="refreshTable"
    ></new-role>
    <!--    删除弹窗-->
    <t-dialog
        v-model:visible="delVisible"
        class="dialogDel"
        theme="info"
        width="431"
        header="您确认删除该角色吗？"
        :on-confirm="onClickConfirm"
    />
  </div>
</template>

<script lang="jsx" setup>
// form 表单
import {getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import {debounce} from "../../utils/tools";
import NewRole from './components/newRole.vue'
import { useRouter } from "vue-router";
import cache from '@/utils/cache.js'
import {
  roleList,
  agencySelectList,
  delRole
} from '@/api/permissionSet/roleManagement.js'

const router = useRouter()
const pageInstance = getCurrentInstance()

const formData = reactive({
  roleName: '',
  agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
});
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

// table
const tableState = reactive({
  tableData: [],
  columns: [
    {
      colKey: 'row-select',
      type: 'multiple',
      width: 55,
    },
    { colKey: 'id', title: '角色ID', align: 'center', ellipsis: true },
    { colKey: 'roleName', title: '角色名称',align: 'center', ellipsis: true },
    { colKey: 'remark', title: '备注',align: 'center', ellipsis: true },
    { colKey: 'createdAt', title: '创建时间',align: 'center', ellipsis: true },
    { colKey: 'createdBy', title: '创建人',align: 'center', ellipsis: true },
    { colKey: 'changedAt', title: '修改时间',align: 'center', ellipsis: true },
    { colKey: 'changedBy', title: '修改人',align: 'center', ellipsis: true },
    { colKey: 'handle', title: '操作', align: 'center', width: 180 },
    // { colKey: 'statusSwitch', title: '是否启用', align: 'center', width: 150 },
  ],
})
const selectedRowKeys = ref([])
const handleSelectChange = (value, ctx) => {
  selectedRowKeys.value = value;
};
// 分页
const current = ref(1);
const pageSize = ref(10);
const totalNum = ref(0)
const onPageSizeChange = (size) => {
  pageSize.value = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  current.value = index
  handleQuery()
};
// 列表查询
const isLoading = ref(false)
const handleQuery = (num) => {
  isLoading.value = true
  let data = {
    pageNo: num === 1 ? 1 : current.value,
    pageSize: pageSize.value,
    ...formData
  }
  roleList(data).then(res => {
    if(res.code === 0) {
      tableState.tableData = res.data.list
      current.value = res.data['currPage']
      pageSize.value = res.data['pageSize']
      totalNum.value = res.data['totalCount']
    }
    isLoading.value = false
  }).catch(error => {
    console.log(error)
    isLoading.value = false
  })

}
// 重置按钮
const handleReset = () => {
  formData.roleName = ''
  formData.agencyId = ''
}
// 编辑
const handleEdit = (row) => {
  let { id } = row
  cache.setSession('role_d_Id', id)
  router.push({
    path: '/permissionSettings/rolePermission'
  })
}
// 删除
const delVisible = ref(false)
const delRow = ref()
const handleDel = (row) => {
  delVisible.value = true
  delRow.value = row
}
const onClickConfirm = () => {
  let data = [ delRow.value.id ]
  delRole(data).then(res => {
    if(res.code === 0) {
      delVisible.value = false
      MessagePlugin.success('删除成功！');
      if(tableState.tableData.length - 1 === 0) {
        current.value = current.value > 1 ? current.value - 1 : current.value
      }
      handleQuery()
    }
  }).catch(error => {
    console.log(error)
  })
}
// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    const otherHeight = pageInstance.refs.topBox.offsetHeight
    const windowHeight = window.innerHeight
    tableHeight.value = windowHeight - otherHeight - 234
    console.log(tableHeight.value)
  })
}
// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  console.log(info)
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)

// 获取tree数据
const casOptions = ref([]) // cascader 数据
const getAgencyList = () => {
  agencySelectList().then(res => {
    if(res.code === 0) {
      casOptions.value = res.data
    }
  })
}
onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
  handleQuery()
  getAgencyList()
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})


// 新增 dialog
const dialogVisible = ref(false)
const dialogTitle = ref('')
const handleNew = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增角色'
}
const closeDialog = () => {
  dialogVisible.value = false
}
const refreshTable = () => {
  handleQuery()
}
</script>

<style lang="scss" scoped>
.contentBox {
  position: relative;
  background-color: #EBECED!important;
  padding: 8px;
  height: 100%;
  .content {
    background-color: white;
    height: 100%;
    border-radius: 4px;
    .topBox {
      height: 65px;
      display: flex;
      padding: 20px 20px 17px 20px;
      background-color: rgba(255, 255,255, 1);
      border-radius: 4px 4px 0 0;
      .topLeft {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
      .topRight {
        margin-left: auto;
        :deep(.t-button) {
          width: 77px;
          height: 28px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(30, 117, 254, 1);
          //border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
          padding: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
        .add-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
    .line {
      height: 0;
      opacity: 1;
      background: rgba(204, 204, 204, 1);
      border: 1px solid rgba(239, 242, 245, 1);
      margin: 0 20px;
    }
    .formBox {
      padding: 0 20px 0 20px;
      border-radius: 4px 0 0 0;
      background-color: rgba(255, 255,255, 1);
      :deep(.t-form) {
        padding: 20px 0 20px 0;
        border-radius: 4px 0 0 0;
        .t-form-inline {
          row-gap: 16px !important;
        }
        .t-form__item {
          width: 25%;
          height: 28px;
          margin-right: 0!important;
          padding-right: 10px;
          .t-range-input {
            height: 28px;
          }
          .t-input {
            height: 28px;
          }
          .t-form__label--right {
            text-align: left;
            padding-right: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
          .t-select__wrap {
            .t-input {
              height: 28px;
            }
          }
        }
        .t-form__item:nth-child(4) {
          padding-right: 0;
        }
        .t-form__item:nth-child(5) {
          .t-form__label--right {display: none}
          .t-form__controls {
            margin-left: 0 !important;
          }
          .t-space {
            width: 100%;
            .timeCheck {
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
            }
          }
          .t-space-item:nth-child(1) {
            width: 126px;
          }
          .t-space-item:nth-child(2) {
            flex: 1;
          }
          .t-space-item:nth-child(3) {
            flex: 1;
          }
          .t-date-picker {
            height: 28px;
            width: 100%;
            .t-input {
              height: 28px;
            }
          }
          .timeType {
            float: left;
            width: 126px;
            text-align: left;
            height: 28px;
            line-height: 28px;
            span {
              margin-right: 10px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.9);
            }
            span:nth-child(4) {
              margin-right: 0;
            }
          }
        }
        .formHandleBox {
          margin-left: auto;
          text-align: right;
          padding-right: 0;
          .t-space {
            margin-left: auto;
            justify-content: center;
            align-items: center;
            .queryBtn {
              border: none;
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(30, 117, 254, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              text-align: center;
            }
            .resetBtn {
              width: 56px;
              height: 30px;
              opacity: 1;
              border-radius: 3px;
              background: rgba(236, 242, 254, 1);
              border: 0.5px solid rgba(30, 117, 254, 1);
              font-size: 12px;
              font-weight: 400;
              color: rgba(30, 117, 254, 1);
              text-align: center;
            }
            .arrowCont {
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                font-size: 12px;
                font-weight: 500;
                color: rgba(138, 138, 138, 1);
              }
              .arrowTD-svg-icon {
                height: 16px;
                width: 16px;
                cursor: pointer;
              }
            }
          }
          .t-form__controls {
            margin-left: 0 !important;
          }
        }
      }
      .upArrow {
        text-align: right;
        height: 20px;
        .arrowTD-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
        }
      }
    }
    .tableBox {
      border-radius: 0 0 0 4px;
      height: calc(100% - 68px);
      padding-left: 20px;
      :deep(.t-table__header) {
        tr {
          th {
            padding: 7px 10px;
            box-sizing: border-box;
          }
          th:nth-child(1) {
            padding: 7px 20px 7px 10px;
          }
          th:nth-child(2) {
            padding-left: 0;
          }
        }
      }
      :deep(.t-table__body) {
        tr {
          background-color: rgba(255,255,255,1) !important;
          td {
            padding: 6px 10px;
            box-sizing: border-box;
          }
          td:nth-child(1) {
            padding: 7px 20px 7px 10px;
          }
          td:nth-child(2) {
            padding-left: 0;
          }
        }
        .t-button {
          border: none;
          width: 56px;
          height: 26px;
          opacity: 1;
          border-radius: 3px;
          font-size: 13px;
          font-weight: 400;
          padding: 0;
          margin: 0 4px;
          .row-svg-icon {
            height: 12px;
            width: 12px;
            margin-right: 2px;
          }
        }
        .rowDel {
          background: rgba(255, 224, 224, 1);
          color: rgba(227, 77, 89, 1);
        }
        .rowConfig {
          background: rgba(255, 238, 224, 1);
          color: rgba(255, 153, 0, 1);
        }
        .rowEdit {
          background: rgba(227, 238, 255, 1);
          color: rgba(30, 117, 254, 1);
        }

        .t-tag {
          margin: 0 auto;
          width: 62px;
          height: 24px;
          opacity: 1;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px 12px 5px 12px;
          font-size: 12px;
          font-weight: 400;
        }
        .t-tag--warning {
          background: rgba(255, 246, 230, 1);
          border: 1px solid rgba(255, 153, 0, 1);
          color: rgba(255, 153, 0, 1);
        }
        .t-tag--success {
          background: rgba(233, 246, 242, 1);
          border: 1px solid rgba(0, 184, 122, 1);
          color: rgba(0, 184, 122, 1);
        }
      }
      :deep(.t-table__content) {
        border-radius: 4px;
        .t-table--layout-fixed {
          border-left: 1px solid rgba(245, 245, 245, 1);
          border-right: 1px solid rgba(245, 245, 245, 1);
        }
      }
    }
    :deep(.t-table__empty) {
      display: none;
    }
    .emptyBox {
      position: absolute;
      height: 116px;
      width: 69px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .emptyTable-svg-icon {
        height: 62px;
        width: 69px;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        color: rgba(92, 91, 91, 1);
      }
    }
    .footerBox {
      background-color: rgba(255,255,255,1);
      width: calc(100% - 16px);
      position: absolute;
      bottom: 8px;
      overflow: hidden;
      border-radius: 0 0 4px 4px;
    }
  }
}
:deep(.dialogDel .t-dialog__wrap .t-dialog__position .t-dialog) {
  padding: 22px 22px 18px 22px;
  .t-icon.t-is-info {
    color: rgba(30, 117, 254, 1) ;
  }
  .t-dialog__body__icon {
    display: none;
  }
  .t-dialog__footer {
    padding-top: 31px;
    .t-dialog__cancel {
      background-color: white;
      border: none;
      width: 60px;
      height: 28px;
    }
    .t-dialog__confirm {
      width: 60px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(30, 117, 254, 1);
    }
    .t-dialog__confirm:hover {
      background: var(--Brand-Brand6-Hover, #458DFF) !important;
      color: var(--text-icon-font-wh-190-anti, rgba(255, 255, 255, 0.90)) !important;
    }
  }
}
</style>
